<template>
	<div>
		<el-button type="primary" size="default" @click="referenceError">
			未定义变量
		</el-button>
		<el-button type="primary" size="default" @click="typeError">
			类型错误
		</el-button>
		<el-button type="primary" size="default" @click="rangeError">
			范围错误
		</el-button>

		<el-button type="primary" size="default" @click="asyncError">
			异步异常
		</el-button>
	</div>
</template>
<script setup>
	function referenceError() {
		// 未定义变量
		console.log(user); // ReferenceError: user is not defined
	}
	function typeError() {
		// 场景1：访问null/undefined属性
		const user = null;
		// console.log(user.name); // TypeError: Cannot read properties of null

		// 场景2：非函数调用
		const config = { debug: true };
		config.debug(); // TypeError: config.debug is not a function

		// 场景3：非法操作
		const obj = Object.freeze({ prop: 42 });
		obj.prop = 100; // TypeError: Cannot assign to read only property
		console.log(user); // ReferenceError: user is not defined
	}

	function rangeError() {
		// 递归栈溢出
		function stackOverflow() {
			stackOverflow();
		}
		// stackOverflow();
		// 非法数组长度
		const arr = new Array(-1); // RangeError: Invalid array length

		// 数字转换异常
		const bigNum = 10n;
		Number(bigNum); // RangeError: The number 10 cannot be converted to a BigInt/ RangeError: Index out of range
	}

	function asyncError() {
		try {
			setTimeout(() => {
				a.x;
			});
		} catch (error) {
			console.log('error');
		}
	}
</script>
